<template>
  <div class="home">
    <a-row type="flex" justify="space-between" align="top">
      <a-col :span="16">
        <a-card>
          <div class="display-f justify-between text-c">
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">项目报备</div>
            </div>
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">我的项目</div>
            </div>
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">合同创建</div>
            </div>
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">我的合同</div>
            </div>
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">我的计划</div>
            </div>
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">待审批项目</div>
            </div>
            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">待审批合同</div>
            </div>

            <a-badge count="5">
              <div>
                <div class="width-60 height-60 border-r15 bg-blue"></div>
                <div class="margin-t10">@我的</div>
              </div>
            </a-badge>

            <div>
              <div class="width-60 height-60 border-r15 bg-blue"></div>
              <div class="margin-t10">服务商</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8" style="padding-left: 20px">
        <a-card class="padding-30 text-c height-140">
          <div class="font-c9 font-s18">{{ new Date() | moment('YYYY年MM月DD日') }}<span
              class="margin-l20">{{ new Date() | moment('dddd') }}</span></div>
          <div class="font-s40">{{ new Date() | moment('hh:mm:ss') }}</div>
        </a-card>
      </a-col>
    </a-row>
    <a-row class="margin-t20">
      <a-col :span="16">
        <a-card title="我参与的合同" :bodyStyle="{padding: 0}">
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司项目合同</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-60">计划：</div>
              <a-progress :percent="64" />
            </div>

            <div class="width-200 display-f align-items-c margin-l20">
              <div class="width-80">里程碑：</div>
              <a-progress :percent="64" strokeColor="green" />
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司项目合同</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-60">计划：</div>
              <a-progress :percent="64" />
            </div>

            <div class="width-200 display-f align-items-c margin-l20">
              <div class="width-80">里程碑：</div>
              <a-progress :percent="64" strokeColor="green" />
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司项目合同</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-60">计划：</div>
              <a-progress :percent="64" />
            </div>

            <div class="width-200 display-f align-items-c margin-l20">
              <div class="width-80">里程碑：</div>
              <a-progress :percent="64" strokeColor="green" />
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>

        </a-card>
      </a-col>
      <a-col :span="8" style="padding-left: 20px">
        <a-card title="合同完成情况" :bodyStyle="{padding: 0}">
          <div id="chartPie1" class="chart-pie"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row class="margin-t20">
      <a-col :span="16">
        <a-card title="我参与的项目" :bodyStyle="{padding: 0}">
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司OA项目</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-120">项目进度：</div>
              <a-progress :percent="64" />
            </div>

            <div class="width-200 display-f align-items-c margin-l20">
              <a-tag color="#EC808D">
                高
              </a-tag>
              <a-tag color="#EC808D">
                紧急
              </a-tag>
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司OA项目</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-120">项目进度：</div>
              <a-progress :percent="64" />
            </div>

            <div class="width-200 display-f align-items-c margin-l20">
              <a-tag color="#EC808D">
                高
              </a-tag>
              <a-tag color="#EC808D">
                紧急
              </a-tag>
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司OA项目</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-120">项目进度：</div>
              <a-progress :percent="64" />
            </div>

            <div class="width-200 display-f align-items-c margin-l20">
              <a-tag color="#EC808D">
                高
              </a-tag>
              <a-tag color="#EC808D">
                紧急
              </a-tag>
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>

        </a-card>
      </a-col>
      <a-col :span="8" style="padding-left: 20px">
        <a-card title="合同完成情况" :bodyStyle="{padding: 0}">
          <div id="chartPie2" class="chart-pie"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row class="margin-t20">
      <a-col :span="16">
        <a-card title="我参与的计划" :bodyStyle="{padding: 0}">
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司OA项目</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-120">项目进度：</div>
              <a-progress :percent="64" />
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司OA项目</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-120">项目进度：</div>
              <a-progress :percent="64" />
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>
          <div class="height-60 border-bottom display-f align-items-c justify-between padding-20">
            <span class="font-wb">能源有限公司OA项目</span>

            <div class="width-200 display-f align-items-c margin-l10">
              <div class="width-120">项目进度：</div>
              <a-progress :percent="64" />
            </div>

            <div class="margin-l20">
              <a-tag color="blue">
                截止时间
              </a-tag>
              <span class="red">2021-03-09</span>
            </div>
          </div>

        </a-card>
      </a-col>
      <a-col :span="8" style="padding-left: 20px">
        <a-card title="计划完成情况" :bodyStyle="{padding: 0}">
          <div id="chartPie3" class="chart-pie"></div>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
export default {
  name: 'home',
  props: {
    msg: String
  },
  mounted () {
    this.renderChartPie1();
    this.renderChartPie2();
    this.renderChartPie3();
  },
  methods: {
    renderChartPie1: function () {
      const chart = this.echarts.init(document.getElementById('chartPie1'));
      const option = {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 735, name: '未超时' },
              { value: 580, name: '已完成' },
              { value: 484, name: '已关闭' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      chart.setOption(option);
    },
    renderChartPie2: function () {
      const chart = this.echarts.init(document.getElementById('chartPie2'));
      const option = {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 735, name: '未超时' },
              { value: 580, name: '已完成' },
              { value: 484, name: '已关闭' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      chart.setOption(option);
    },
    renderChartPie3: function () {
      const chart = this.echarts.init(document.getElementById('chartPie3'));
      const option = {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 735, name: '未超时' },
              { value: 580, name: '已完成' },
              { value: 484, name: '已关闭' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      chart.setOption(option);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  padding: 20px;
}

.chart-pie {
  height: 180px;
}
</style>
